/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

$(document).ready(function() {
    MenuBar.enableHover();
    //Menu.showMenu(param);
});

/*
 * Inspect the ihtml/ directory in the ria.zip archive and then add it to the project.
When initializing the menu, you should dynamically add the content of each drop-
down_* le into one of the above div's. To do this, you can use:
a) $.ajax()
b) $(*).load() - Simpler to use, but $.ajax() gives you additional control.
 * 
 * For each entry in the drop down, you need to register a click event. Whenever the
user clicks on an item in the drop down menu, you should populate the bottom
div with an appropriate text from the ihtml/ directory by using one of the calls
described in {6.4}. This time around though, a problem exists. Because the div's
we added are populated dynamically using AJAX, there is no guarantee that the
newly loaded content has been added to the DOM when we call $(*).click(). The
solution to this problem is to use $(*).live(). Refer to the JQuery documentation
for more information.
 * 
 */

var shownDropDown = 0;
var timeout = 200;
var closetimer = 0;

var MenuBar = {
    enableHover:function() {
        
        /*
         * Load contents of dropdowns into respective menus
         */
        $('#fruits_dropdown').load('ihtml/dropdown_fruits.ihtml');
        $('#vegetables_dropdown').load('ihtml/dropdown_vegetables.ihtml');
        $('#nuts_dropdown').load('ihtml/dropdown_nuts.ihtml');
        
        /*
         * Register onclick for all the buttons
         */
        $('ul.dropdown #apple').live('click', function() {
            registerClick("apple");
        });
        $('ul.dropdown #banana').live('click', function() {
            registerClick("banana");
        });
        $('ul.dropdown #cashew').live('click', function() {
            registerClick("cashew");
        });
        $('ul.dropdown #pecan').live('click', function() {
            registerClick("pecan");
        });
        $('ul.dropdown #lettuce').live('click', function() {
            registerClick("lettuce");
        });
        $('ul.dropdown #tomato').live('click', function() {
            registerClick("tomato");
        });
        
        /*
         * Register hover for menu buttons
         */
        $("#fruits_button").hover(function() {
            placeDropDown("#fruits_button", "#fruits_dropdown");
            showDropDown("#fruits_dropdown");
        }, function() {
            startCloseTimer();
        });

        $("#vegetables_button").hover(function() {
            placeDropDown("#vegetables_button", "#vegetables_dropdown");
            showDropDown("#vegetables_dropdown");
        }, function() {
            startCloseTimer();
        });

        $("#nuts_button").hover(function() {
            placeDropDown("#nuts_button", "#nuts_dropdown");
            showDropDown("#nuts_dropdown");
        }, function() {
            startCloseTimer();
        });
    }
}


var registerClick = function(param) {
    $('#content').load("/EncylopediaServlet", {what: param});
}

var showDropDown = function(dropdown) {
    cancelCloseTimer();
    closeDropDown();
    shownDropDown = $(dropdown);
    shownDropDown.css("visibility", "visible");
    shownDropDown.mouseenter(cancelCloseTimer);
    shownDropDown.mouseleave(startCloseTimer);
}

var placeDropDown = function(button,dropdown) {
    var pos = $(button).offset();  
    var height = $(button).height();
    $(dropdown).css( 
        {"left": (pos.left ) + "px", 
        "top" : (pos.top + height) + "px"} );
};

// closes drop down
function closeDropDown()
{
	if(shownDropDown) shownDropDown.css("visibility", "hidden");
}

// go close timer
function startCloseTimer()
{
	closetimer = window.setTimeout(closeDropDown, timeout);
}

// cancel close timer
function cancelCloseTimer()
{
	if(closetimer)
	{
		window.clearTimeout(closetimer);
		closetimer = null;
	}
}

var Menu = {

showMenu:function(param) {
    
    $(param).load();
    
    }
}